@import "../../utils/theme";
/* pages/book/book.wxss */
/* 隐藏滚动条 */

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.confirm-order-container-wrap {
  background-color: #F6F6F6;
  padding: 32rpx 16rpx 16rpx;

  .time-select-wrap {
    display: flex;
    align-items: center;
    margin-top: 32rpx;

    .select-label {
      margin-right: 12rpx;
    }

    .select-time-range {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;

      .end-time-item {
        width: 158rpx;
        height: 60rpx;
        border-radius: 88rpx;
        border: 2rpx solid #8C8C8C;
        display: flex;
        align-items: center;
        justify-content: center;

        .time-value {
          font-size: 32rpx;
          font-weight: bold;
          color: #8C8C8C;
        }
      }

      .start-time-item {
        width: 200rpx;
        height: 60rpx;
        border-radius: 88rpx;
        border: 2rpx solid @primary-color;
        display: flex;
        align-items: center;
        justify-content: center;

        .pencil-icon {
          width: 30rpx;
          height: 30rpx;
          margin-left: 12rpx;
        }

        .time-value {
          font-size: 32rpx;
          font-weight: bold;
          color: @primary-color;
        }
      }

      .select-time-label {
        height: 44rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        line-height: 38rpx;
      }
    }
  }

  .meal-empty-text {
    font-size: 28rpx;
    color: #8C8C8C;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .mask {
    height: 148rpx;
    background-color: @primary-color;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .content-wrap {

    .pay-method-conn {
      padding: 24rpx 32rpx;
      border-radius: 16rpx;
      background-color: #FFFFFF;
      margin-top: 16rpx;
      display: flex;
      flex-flow: column;

      .pay-method-list {
        .pay-method-list-item {
          padding: 12rpx 0;
          display: flex;
          align-items: center;
          line-height: 1;

          .pay-method-label {
            font-size: 30rpx;
            font-weight: 500;
            color: #333333;
            margin-left: 12rpx;
          }

          .select-img-wrap {
            margin-left: auto;

            .select-icon {
              width: 38rpx;
              height: 38rpx;
            }
          }

          .pay-method-icon {
            width: 54rpx;
            height: 54rpx;
          }


        }
      }

      .pay-method-title {
        height: 44rpx;
        padding: 0 10rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 38rpx;
        margin-bottom: 8rpx;
      }

    }

    .meal-wrap {
      display: flex;
      align-items: center;
      margin-top: 16rpx;

      .meal-scroll-parent {
        height: 180rpx;
      }

      .meal-scroll-wrap {
        width: 100%;
        height: 100%;
      }

      .label {
        margin-right: 12rpx;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .meal-list {
        flex: 1;
        //display: flex;
        //align-items: center;
        //flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        .metal-box-item {
          height: 200rpx;
          padding: 8rpx;
          box-sizing: border-box;
          position: relative;

          .meal-item {
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.9);
            border: 1px solid #8C8C8C;
            border-radius: 16rpx;
            align-items: center;
            display: flex;
            flex-flow: column;
            justify-content: center;
            background: #FFFFFF;
            transition: all .1s;
            white-space: nowrap;
            width: 100%;
            height: 100%;

            &.active {
              border-color: @primary-color;
              color: #FFFFFF;
              background: @primary-color;
            }

            .meal-name {
              font-size: 24rpx;
              white-space: pre-wrap;
              text-align: center;
              margin-bottom: 12rpx;
            }

            .meal-desc {
              font-weight: bold;
              font-size: 26rpx;
            }

            .meal-price {
              margin-top: 12rpx;
              line-height: 1;
              display: flex;
              align-items: flex-end;
              font-weight: bold;

              .pix {
                font-size: 30rpx;
              }

              .price {
                font-size: 32rpx;
              }
            }
          }

        }


      }
    }

    .coupon-wrap-conn {
      width: 100%;
      background-color: #FFFFFF;
      padding: 24rpx 32rpx;
      border-radius: 16rpx;

      .coupon-item {
        display: flex;
        align-items: center;
        line-height: 1;
        margin-bottom: 40rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .coupon-item-label {
          height: 44rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          line-height: 44rpx;
        }

        .user-money-value {
          color: @primary-color;
          margin-left: 16rpx;
          font-size: 30rpx;
          font-weight: bold;
        }

        .coupon-current-target {
          height: 28rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #8F8E92;
          line-height: 28rpx;
          margin-left: auto;
        }

        .chevron {
          margin-left: 12rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }

  .footer-btn-wrap {
    background: #FFFFFF;
    box-shadow: 0 8rpx 22rpx 0 rgba(188, 218, 190, 0.25);
    border-radius: 76rpx;
    box-sizing: border-box;
    padding: 24rpx 48rpx 14rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;

    .order-total-price {
      color: #ff432f;
      font-weight: bold;
    }

    .coupon-price-wrap {
      margin-top: 8rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .coupon-price {
      font-weight: bold;
      color: #ff432f;
      margin-left: 6rpx;
    }

    .commit {
      width: 192rpx;
      height: 64rpx;
      background: @primary-color;
      border-radius: 98rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      color: #FFFFFF;
      font-weight: 500;
      font-size: 28rpx;
    }
  }
}

page {
  background: #f6f6f6;
}

.switch-confirm-type {
  margin-bottom: 24rpx;
}

.container {
  padding: 32rpx 32rpx 150rpx 32rpx;
  margin-top: -180rpx;

  .coupon-wrap-conn {
    width: 100%;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    overflow: hidden;

  }


}

.bg {
  width: 100%;
  height: 200rpx;
  background-color: @primary-color;
}

.card {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
}

.card .top {
  display: flex;
  justify-content: start;
}

.card .top image {
  width: 200rpx;
  height: 300rpx;
  margin-right: 30rpx;
}

.card .top .right .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 28rpx;
}

.card .top .right .title .teach {
  font-size: 28rpx;
  font-weight: 500;
  color: @primary-color;
}

.card .top .right image {
  width: 40rpx;
}

.card .top .right .tips {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #ff432f;
}

.card .top .right .tips .title {
  font-weight: bold;
  font-size: 28rpx;
  color: #000;
}

//.card .top .right .tip {
//  font-size: 20rpx;
//  margin: 12rpx 3rpx;
//  border-radius: 30rpx;
//  color: #00b5db;
//  padding: 3rpx 6rpx;
//  border: 2rpx solid #ccc;
//}

.card .top .bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 32rpx;
  align-items: center;
  font-size: 24rpx;
}

.card .top .bottom .price {
  font-size: 32rpx;
}

.card .top .bottom .grey {
  color: #a1a1a1;
}

//.card .top .bottom .btn {
//  width: 136rpx;
//  height: 56rpx;
//  color: #fff;
//  text-align: center;
//  line-height: 56rpx;
//  background: #00B5DB;
//  border-radius: 12rpx;
//  margin-left: 16rpx;
//}

.ordertype {
  background-color: #fff;
  padding: 32rpx 0;
  border-radius: 16rpx;
}

.ordertype .swiper-tab {
  border-radius: 30rpx;
  display: flex;
  margin: 0 auto;
  margin-top: 30rpx;
}

.ordertype .swiper-tab-list {
  border-radius: 30rpx;
  flex: 1;
  text-align: center;
  color: #000;
  height: 97rpx;
  font-size: 24rpx;
  padding-top: 33rpx;
  margin-right: 16rpx;
}

.ordertype .swiper-tab-list .day {
  color: #000;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.ordertype .swiper-tab-list .icon {
  width: 25rpx;
  height: 29rpx;
  display: block;
  margin: 0 auto 10rpx;
}

.ordertype .swiper-tab-list.on {
  background: #00B5DB;
  color: #fff;
}

.ordertype .swiper-tab-list.on .day {
  color: #fff;
}

.taocan_list {
  display: flex;
  align-items: center;
  line-height: 1;
}

.taocan_list .title {
  width: 160rpx;
}

.taocan_list .time_range {
  display: flex;
  align-items: center;
  line-height: 1;
}

.taocan_list .and {
  //width: 70rpx;
  text-align: center;
  padding: 0 16rpx;
  //line-height: 60rpx;
  font-weight: 600;
}

.taocan_list .time_range .start {
  width: 180rpx;
  height: 50rpx;
  border-radius: 88rpx;
  border: 1rpx solid @primary-color;
  display: flex;
  justify-content: center;
  align-items: center;
  color: @primary-color;
}

.taocan_list .time_range .start.grey {
  width: 180rpx;
  height: 50rpx;
  border-radius: 88rpx;
  color: #8C8C8C;
  border: 1rpx solid #8C8C8C;
  display: flex;
  justify-content: center;
  align-items: center;
}

.taocan_list .time_range .start .edit-pencil {
  width: 28rpx;
  height: 28rpx;
  margin-left: 12rpx;
}

.taocanmain {
  display: flex;
  overflow-x: scroll;
}

.taocan {
  min-width: 120rpx;
  color: #8c8c8c;
  font-size: 26rpx;
  border-radius: 16rpx;
  border: 1rpx solid #8c8c8c;
  text-align: center;
  padding: 8rpx 16rpx;
  margin-right: 20rpx;
}

.aa {
  color: #00b5db;
  border-radius: 16rpx;
  border: 1rpx solid #00b5db;
  text-align: center;
  padding: 8rpx 16rpx;
}

.order-total {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .order-total-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .order-item-label {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 38rpx;
    }

    .order-item-value {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 38rpx;
    }
  }


  .title {
    font-weight: bold;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //border-bottom: 1px solid #e0e0e0;
    //padding-bottom: 16rpx;
    padding: 6rpx 0;
    box-sizing: border-box;
    margin-bottom: 32rpx;

    .red {
      color: #ff432f;
    }
  }
}


.room {
  width: 718rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 0 0 12rpx 12rpx;
  margin: 20rpx auto 0;
}

.room_swiper {
  width: 100%;
  /* padding: 0 30rpx 6rpx; */
  box-sizing: border-box;
  position: relative;
  height: 400rpx;
}

.room_swiper .slide-image {
  width: 100%;
  height: 400rpx;
  display: block;
}

.room_row1 {
  justify-content: space-between;
  padding: 24rpx 20rpx 28rpx;
  border-bottom: 1px solid rgba(220, 220, 220, 0.5);
}

.room_row1 .name {
  font-size: 32rpx;
  font-weight: bold;
}

.room_row1 .sale,
.room_row1 .price {
  font-size: 32rpx;
}

.room_row1 .sale text,
.room_row1 .price text {
  color: #00B5DB;
  font-size: 32rpx;
}

.room_row1 .price {
  margin-left: 34rpx;
  margin-right: 120rpx;
}

.room_row2 {
  justify-content: space-between;
  padding: 24rpx 50rpx 24rpx 10rpx;
}

.room_row2 .left {
  position: relative;
}

.room_row2 .left::after {
  content: '';
  position: absolute;
  right: -50rpx;
  background: rgba(220, 220, 220, 0.5);
  width: 1px;
  height: 74rpx;
  top: 50%;
  margin-top: -38rpx;
}

.room_row2 .areaIcon {
  flex-shrink: 0;
  margin-right: 12rpx;
  width: 54rpx;
  height: 54rpx;
}

.room_row2 .address {
  width: 420rpx;
  flex-shrink: 0;
  font-size: 24rpx;
  margin-bottom: 14rpx;
}

.room_row2 .distance {
  font-size: 24rpx;
}

.room_row2 .distance text {
  color: @primary-color;
}

.room_row2 .call {
  width: 54rpx;
  height: 54rpx;
  flex-shrink: 0;
}

.store_introduce {
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 32rpx;
}

.store_introduce .title {
  font-size: 30rpx;
  margin: 0 20rpx 10rpx;
  font-weight: bold;
}

.store_introduce .txt {
  font-size: 28rpx;
  margin: 0 20rpx 0 80rpx;
  /* 文字自动换行 */
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
}

.bookTime {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 22rpx 50rpx 32rpx;
  margin: 30rpx auto;
}

.bookTime .lable,
.other_lable {
  justify-content: center;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.bookTime .lable image,
.other_lable image {
  width: 54rpx;
  height: 54rpx;
  margin-right: 14rpx;
}

.bookTime .time {
  justify-content: center;
  width: 618rpx;
  height: 64rpx;
  background: @primary-color;
  color: #fff;
  font-size: 28rpx;
}

.bookTime .time .more {
  width: 14rpx;
  height: 14rpx;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 24rpx;
  border-radius: 2px;
}

.other {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 22rpx 0 0;
  margin: 0 auto 30rpx;
}

.other_room {
  justify-content: space-between;
  padding: 20rpx 32rpx;
  border-bottom: 1px solid rgba(220, 220, 220, 0.5);
}

.other_room .name {
  font-size: 30rpx;
  margin-right: 26rpx;
}

.other_room .price,
.other_room .see {
  color: #666;
  font-size: 24rpx;
}

.other_room .price text {
  color: @primary-color;
}

.other_room .see .more {
  width: 12rpx;
  height: 12rpx;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  transform: rotate(-45deg);
  margin-left: 10rpx;
  border-radius: 2px;
}

.details {
  box-sizing: border-box;
  width: 718rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 48rpx 24rpx 20rpx;
  margin: 0 auto 30rpx;
}

.details_title {
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.details_ct {
  font-size: 24rpx;
}

.details_ct > view {
  margin-bottom: 30rpx;
}

//.btn {
//  width: 100%;
//  box-sizing: border-box;
//  height: 100rpx;
//  background: rgba(255, 255, 255, 1);
//  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
//  border-radius: 132rpx;
//  position: fixed;
//  bottom: 40rpx;
//  left: 7%;
//  padding-left: 38rpx;
//  font-size: 24rpx;
//  justify-content: space-between;
//}

.btn .price {
  margin-right: 38rpx;
  font-size: 36rpx;
}

.btn .price .unit {
  margin-right: 16rpx;
  font-size: 24rpx;
}

.btn .commit {
  height: 100rpx;
  line-height: 100rpx;
  width: 194rpx;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  background: @primary-color;
  border-radius: 0 132rpx 132rpx 0;
}

.detail-page .foot_cancle,
.detail-page .foot_confirm {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  height: 92rpx;
  line-height: 92rpx;
}

.detail-page .foot_cancle {
  background: #a5e5cc;
}

.detail-page .foot_confirm {
  background: #00B5DB;
}

.w-form {
  background: white;
  width: 90%;
  margin-top: 10px;
  padding: 20px;
}

.w-form-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  margin-bottom: 10px;
}

.w-form-item-content {
  margin-top: 10px;
}

.w-form-item-label {
  color: #777;
}

.w-form-placeholder {
  width: 100%;
  height: 40rpx;
}


.confirm-order-container {
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;
}

.confirm-order-container .order-body {
  padding: 0 32rpx 32rpx;
  z-index: 3;
  overflow-y: scroll;
  left: 0;
  top: 0;
  height: calc(100% - env(safe-area-inset-bottom));
}

.confirm-order-container .order-body .confirm-btn-wrap {
  width: 100%;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 76rpx;
  padding: 20rpx 48rpx 18rpx;
  margin-top: 32rpx;
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

.confirm-order-container .order-body .confirm-btn-wrap .right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-box {
  padding: 12rpx 28rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 98rpx 98rpx 98rpx 98rpx;
  border: 2rpx solid #C5996A;
  box-sizing: border-box;
  --color: #C5996A;
  --bg: #FFFFFF;
  background-color: var(--bg);
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-box.active {
  --color: #FFFFFF;
  --bg: #C5996A;
  margin-left: 16rpx;
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-box .btn-text {
  font-size: 24rpx;
  color: var(--color);
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-box .btn-text.small {
  transform: scale(0.4);
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-item {
  padding: 12rpx 30rpx;
  border-radius: 20rpx;
  border: 2rpx solid #C5996A;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  line-height: 1;
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-item .title-1 {
  font-size: 28rpx;
  font-weight: 500;
  color: var(--color);
}

.confirm-order-container .order-body .confirm-btn-wrap .right .btn-item .title-2 {
  font-size: 24rpx;
  font-weight: 500;
  color: var(--color);
}

.confirm-order-container .order-body .confirm-btn-wrap .left {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

.confirm-order-container .order-body .confirm-btn-wrap .left .tip {
  font-size: 22rpx;
  font-weight: 500;
  color: #8C8C8C;
  margin-top: 4rpx;
}

.confirm-order-container .order-body .confirm-btn-wrap .left .check {
  display: flex;
  align-items: center;
}

.confirm-order-container .order-body .confirm-btn-wrap .left .check .label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-right: 4rpx;
}

.confirm-order-container .order-body .confirm-btn-wrap .left .check .value {
  font-size: 40rpx;
  font-weight: 500;
  color: #000000;
}

.confirm-order-container .order-body .coupon-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin-top: 32rpx;
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item.active {
  margin-bottom: 40rpx;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item .coupon-title {
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item .coupon-desc {
  display: flex;
  align-items: center;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item .coupon-desc .coupon-num {
  font-size: 28rpx;
  font-weight: 500;
  color: #8F8E92;
  line-height: 1;
  margin-right: 8rpx;
}

.confirm-order-container .order-body .coupon-wrapper .coupon-item .coupon-desc .arrow {
  width: 24rpx;
  height: 24rpx;
}

.confirm-order-container .order-body .price-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin-top: 32rpx;
  padding: 28rpx 28rpx 32rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.confirm-order-container .order-body .price-wrapper .price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.confirm-order-container .order-body .price-wrapper .price-item:last-child {
  margin-bottom: 0;
}

.confirm-order-container .order-body .price-wrapper .price-item .label {
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}

.confirm-order-container .order-body .price-wrapper .price-item .price-value {
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}

.confirm-order-container .order-body .price-wrapper .price-title {
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 1;
  margin-bottom: 36rpx;
}

.confirm-order-container .order-body .mode-wrapper {
  width: 100%;
  background-color: #FFFFFF;
  margin-top: 32rpx;
  padding: 20rpx 32rpx 40rpx;
  border-radius: 20rpx;
}

.time-choose-wrapper {
  padding: 0 16rpx 32rpx;
  box-sizing: border-box;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.select-wrap {
  display: flex;
  align-items: center;
  margin-top: 24rpx;

  .select-label {
    margin-right: 12rpx;
  }

  .select-hour-list {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: space-between;
    font-size: 0;
    white-space: nowrap;
    position: relative;

    .select-hour-list-inner {
      height: 60rpx;
      box-sizing: border-box;
    }

    .hour-item-wrap {
      display: flex;
      flex-flow: row nowrap;
      gap: 16rpx;
    }

    .hour-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      --hour-color: #8C8C8C;
      padding: 0 28rpx;
      height: 60rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: var(--hour-color);
      font-weight: bold;
      border-radius: 88rpx;
      border: 2rpx solid var(--hour-color);

      &.active {
        --hour-color: #40B97C;
      }
    }
  }
}


.date-wrap {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.date-wrap .date-item {
  width: 112rpx;
  height: 112rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #000000;
  --bg: #FFFFFF;
  --color: #333333;
  background-color: var(--bg);
  border-radius: 20rpx;
}

.confirm-order-container .order-body .mode-wrapper {
}

.date-wrap .date-item.active {
  --bg: #4CA66B;
  --color: #FFFFFF;
}


.date-wrap .date-item .date,
.date-wrap .date-item .time {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 33rpx;
  color: var(--color);
}

.confirm-order-container .order-body .shop-info {
  width: 100%;
  background: #FFFFFF;
  border-radius: 20rpx;
  display: flex;
  padding: 20rpx 28rpx 20rpx 22rpx;
  box-sizing: border-box;
}

.confirm-order-container .order-body .shop-info .desc-wrap {
  flex: 1;
  margin-left: 20rpx;
}

.confirm-order-container .order-body .shop-info .desc-wrap .tip-wrap {
  display: flex;
  flex-flow: column;
  margin-top: 46rpx;
}

.confirm-order-container .order-body .shop-info .desc-wrap .tip-wrap .tip-title {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
}

.confirm-order-container .order-body .shop-info .desc-wrap .tip-wrap .tip-value {
  font-size: 24rpx;
  font-weight: 500;
  color: #8C8C8C;
  line-height: 28rpx;
  margin-top: 8rpx;
}

.confirm-order-container .order-body .shop-info .desc-wrap .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confirm-order-container .order-body .shop-info .desc-wrap .header .shop-name {
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 44rpx;
}

.confirm-order-container .order-body .shop-info .desc-wrap .header .tag {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #C5996A;
  line-height: 40rpx;
}

.confirm-order-container .order-body .shop-info .image-shop {
  width: 194rpx;
  height: 286rpx;
}

.confirm-order-container .mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 88rpx;
  background-color: #F2EDDC;
  z-index: 2;
}
